Muchos ya lo han aplicado a su blog y es algo muy sencillo. Aplicar imágenes tipo iconos junto al texto de comentarios, autor, categoría, etiquetas, fecha...
Primeramente vamos a localizar el lugar donde haremos las modificaciones, nos situamos en este orden:

Panel/Diseño/Plantilla/Edición de HTML

Buscaremos en nuestra plantilla los CSS justo antes de ]]></b:skin> es el lugar idoneo para aplicar nuestro código.
A continuación copiaremos y pegaremos los códigos dependiendo de la parte que deseamos añadir una imagen tipo icono.

"Imagen en CATEGORÍAS - ETIQUETAS"

.post-labels{
padding-left:20px;
padding-top:5px;
background: url(url_de_la_imagen) center left no-repeat;
}


"Imagen en FECHA"

.comment-timestamp {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_la_imagen) center left no-repeat;
}


"Imagen en COMENTARIOS"

.comment-link{
padding-left:20px;
padding-top:5px;

background: url(url_de_la_imagen) center left no-repeat;
}


"Imagen en HORA"

.post-timestamp {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_la_imagen) center left no-repeat;
}


"Imagen en (Publicado por) o AUTOR"

.post-author{
padding-left:20px;
padding-top:5px;
background: url(url_de_la_imagen) center left no-repeat;
}




(Donde dice url_de_la_imagen hay que añadir la url de la imagen seleccionada)


Páginas donde encontraréis variedad en imágenes tamaño 16X16 tipo iconos.

famfamfam.com

graphicpush.com

Crystal_Clear

intersmash.com

thinkwasabi.com

sweetie

e-lusion

fasticon

pinvoke

somerandomdude

Si deseas añadir una imagen tipo icono junto a la fecha mira aquí.

!Suerte¡



Rosario

Ya puse un lapicillo en los comentarios :)

Gracias gem@

Un abrazo fuerte

Responder
Anónimo

Que buen truco!!!!! siiiiii...siempre quise tener esos iconos! y me han quedado muy bien! Se agradece mucho Gem@. =)

adios*

Responder
Gabriela

gracias por el aporte.
en las paginas que pusiste me costó encontrar un icono, entonces busqué una imagen que me gustara y la edite con esa pagina para crear un favicons
ya que ahí te dá un icono de 16x16.

adios

Responder
Vero

Graciaaaaaaaas

A ver si tengo un ratillo y lo intento :D

Responder
Gem@

Era raro que no lo probaras Chare :)

Michael pues me alegra se portadora de tu alegría, espero encuentres más datos útiles ;)

Gabriela te agradezco mucho el comentario y la aportación, le será útil a muchos amigos :)

Muy bien Vero ¡Suerte¡

Responder
Anónimo

HOla Gem@, no sé si es aquí donde debo pregusntar esto. ¿Cómo puedo cambiar las frases entradas recientes y antiguas por un icono? Gracias anticipadas.

Responder
Gem@

Puedes preguntar donde quieras Tatiana.
Encontrás la solución aquí.
!Suerte¡

Responder
Vero

Hola! He intentado poner los iconos, pero sólo me sale el que se pone en la parte del autor del blog, el de los comentarios y las etiquetas no :S pensé que podría ser por el tipo de imagen pero ya comprobé que no. Sabes por qué puede ser?

Gracias!!

Responder
Gem@

Hola Vero puede ser que no tengas activada la opción para que sea visible la parte que estás añadiendo.
Activa esas opciones puedes verlo aquí:
http://gemablog-.blogspot.com/2007/06/organizar-elementos-de-la-pgina.html

Responder
Vero

Sí que lo tengo activado... pero bueno, gracias por responder!:)

Responder
Gem@

He probado en una plantilla como la tuya Vero, añadir la imagen a las etiquetas no es problema y ha resultado bien, sin embargo a los comentarios ha sido otra historia.
Si decides aplicar las imágenes házmelo saber ¿ok?
Saludos cordiales :)

Responder
Jose, a secas

Anoche estube bastante rato haciendo cambios esteticos en los blogs (o intentandolo) y me pasa una cosa.

Cuando abro ¿Y que digo hoy? con el Explorer, el icono que coloqué en "Etiquetas", se desplaza a la linea inferior, cosa que no ocurre abriendo el blog con Firefox (para que veas que compruebo el aspecto con los 2 navegadores mas comunes ;D ).

¿Tienes idea de porque pasa eso? Lo he intentado desde la edicion de la plantilla HTML pero no consigo arreglarlo, al contrario, lo estropeo para visualizarlo con Firefox.

Un saludo,

JmpaSrgc

Responder
Gem@

Te he dejado comentario en el blog JmpaSrgc :)

Responder
Anónimo

Hola Gema!
De nuevo por aquí :)
Sabes, no puedo lograr que aparezcan "Publicado por, en, Etiquetas.." Y eso que lo tengo activado para que salgan.. HELP ME!
Thanks

Responder
Gem@

Sidhe ¿no puedes ahora o desde que instalaste la plantilla?

Responder
Anónimo

No puedo desde que la instale, la plantilla viene sin esos datos.

Responder
Anónimo

Gema, disculpa pero soy muy preguntona :)
¿En que parte de la plantilla tendría que ubicarme para cambiar la imagen del basurero y arreglar la fecha como la tienes tú?

Bye bye

Responder
Gem@

Perdona que no viera el anterior comentario Sidhe ya de paso te contesto que si por defecto la plantilla no lo traía desde el principio el problema debe ser de la plantilla pero sin verla no puedo asegurártelo.
Cuando dice sel basurero te refieres a la imagen para eliminar el comentario ¿verdad? cada basurero lleva una id única porque va asociado con el comentario a eliminar. Pero es buena pregunta porque por ejemplo las herramientas o el lápiz de edición rápida pueden sustituirse. (bastante me has dicho hasta que lo descubra jajajaja)
La fecha no la he tocado, es la única parte de los comentarios que la dejé sin personalizar. Pero he mirado la tuya la única diferencia es que tienes el texto rojo y e modelo de fecha que lo puedes cambiar en Configuración/Formato/Formato de cabecera de fecha. Y el color de la fecha en:
.comment-footer a:link {
Lo del menú lo he visto en otro comentario, mañana espero darle solución ;)

Responder
Anónimo

Hola Gema, soy Eric de dineroenunmes.blogspot, me gustaría saber como puedo poner los avatares en mis comentarios. He estado buscando alguna entrada para creo no haberla visto.
Haber si me puedes echar una mano.

Gracias y gran blog!!!

Responder
Gem@

Hola Eric tengo que hacer algo y hacerlo ya, me refiero a ordenar o clasificar las etiquetas.
Pero hiciste bien el preguntar, ese tema puedes verlo aquí ;)

Responder
Rubén Bodewig

Hola Gema, qué tal? hace tiempo que no te escribo, he estado trabajando en la reforma de www.alicantevivo.org
Aún no he acabado, me faltan las cabeceras y cosas así, pero lo principal ya está.
¿Qué te parece?
Por cierto, si te interesa la nube de etiquetas así, es un código muy sencillo y te puedo decir como lo he hecho (qué menos con lo que nos ayudas...)

Mi pregunta es que intento colocar unos iconos antes de categoría, autor... como explicas aquí, pero me aparece un espacio en blanco y no consigo que aparezca el icono.
Creo que es cuestión del padding, algo que para mí siempre ha sido un misterio diabólico que no comprendo.
Podrías echar un vistazo y aconsejarme? gracias...

Responder
Gem@

¡Hola Rubén! estás dejando el blog estupendo :)
Sobre la nube de etiquetas es una pasada, la tengo añadida hace tiempo a mi blog de amigos, pero no hablé sobre ella (otra cosa más que tengo pendiente)

Sobre añadir el icono en autor no sé si tendrá algo que ver lo extenso del texto de autor imagino que si ¿puedes dejar el icono que lo vea puesto?

Responder
Rubén Bodewig

Hola Gema, pues ya he conseguido arreglar todos menos el de la hora. He repasado todos los pasos y las url de las imágenes, y resulta que muchos los tenía duplicados por algún error, y parece como que se anulaban el uno al otro.
Crees que puedes ayudarme con el icono de la hora?

Cuando tenga acabado el blog te avisaré, que me hace ilusión que lo veas. Tu trabajo tiene mucho que ver aquí.
Por cierto, me he montado un método un poco rupestre de hacer pdfs, pero medio-funciona. Supongo que con plantillas de fondo blanco y más sencillas como esta iría genial.

Responder
Gem@

Intenta añadir el mismo código que para autor pero cambiando .post-author{ por .post-timestamp {
El padding: 1px 0px; margin: 0px; no es necesario que lo añadas, si ves que se queda muy pegado aumenta en padding-left:20px;

Responder
Rubén Bodewig

Gracias, como siempre. Con lo último que me has dicho, nada, no funciona. Creo que es porque tengo la hora arriba... pero no estoy seguro.

¿Se podría meter en la zona del código donde se define post-timestamp y todos sus datos...?

lo he localizado a partir de h3 class= post-title entry-title

a partir de ahí define que sale el nombre del autor, y luego la hora de publicación... y si metiera por ahí el código de mi imagen??

Responder
Gem@

Da lo mismo que lo incluyas en la plantilla que añadiéndola a la css.
He estado mirando ahora y no veo ese espacio blanco Rubén. De todas formas ¿por qué tienes la fecha en la parte superior e inferior? no sé... son cosas mías :(

Responder
Marta Villanueva San Miguel

hola no consigo sustituir los iconos de mi plantilla por otros que he creado, éstos estan en imagen y no puedo pasarlos a codigo url. la verdad es que necesito tu ayuda porque soy muy persistente, pero me creo que sin tu ayuda no voy a poder hacerlo. Mi plantilla es de Btemplates (Love is in the air), por si te sirbe de ayuda. Por favor ayuda por que esto es desesperante.

Gem@

Toda imagen se muestra porque está alojada en algún servidor de ahí que tenga una url.
El código para mostrar una imagen es:
<img src="ur-imagen"/>
También es posible mostrar imágenes con CSS añadiendolas a los estilos pero no es tu caso.
Si en Diseño editas el gadget primero que hay de los iconos a redes sociales verás que ahí está la url de cada imagen.
Para poder sustituirlas necesitas subir tus imágenes a algún servidor por ejemplo en una entrada de Blogger que luego puedes dejar en borrador, copias la url de cada imagen y la pegas sustituyendo las que quieres quitar.

Responder
Marta Villanueva San Miguel

hola te voy hacer otra pregunta: como puedo quitar de la barra lateral lo de blog suscription, ya que no le encuentro utilidad. Y si tuvieras cualquier recomendación te lo agradeceria, ya que esto de ser principiante es muy duro. Un saludo y gracias de antemano.

Responder
Marta Villanueva San Miguel

hola ya he podido quitar de la barra lateral lo de la suscription. El que la sigue la consigue. Pero lo de los iconos, no hay manera. A si que ayuda por favor.

Gem@

Marta dime que iconos son y así vamos sobre seguro :)

Responder
Obed

Gracias Gema justo lo que andaba buscando :D

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top